<template>
 <div>
    <!-- row-key必填项 -->
     <el-table v-loading="listLoading" border row-key="id" :data="list" fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="ID" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

       <el-table-column label="姓名">
         <template slot-scope="scope">
              <template>
                   <span>{{scope.row.author}}</span>
              </template>
         </template>
       </el-table-column>
       
        <el-table-column label="标题">
          <template slot-scope="scope">
              <template>
                   <span>{{scope.row.title}}</span>
              </template>
         
          </template>
       </el-table-column>
   
       <el-table-column label="拖拽" align="center">
           <template slot-scope="scope">
              <svg-icon class="drag-handler" icon-class="drag"/>
          </template>
       </el-table-column>
    </el-table>   
         <div class="show-d">拖拽之前顺序 : &nbsp; {{ oldList }}</div>
         <div class="show-d">拖拽之后顺序 : {{ newList }}</div>
 </div>
</template>

<script>
import { fetchList } from '@/api/article'
import Sortable from 'sortablejs'

export default {
  name:'index',
      data() {
      return {
       list:[],
      sortable: null,
       listLoading: true,
        listQuery: {
        page: 1,
        limit: 5
      },
       oldList: [],
       newList: []
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
       fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false

        this.oldList = this.list.map(v => v.id)

        this.newList = this.oldList.slice()
        this.$nextTick(() => {
          this.setSort()
        })

        
      })
    },
  setSort() {
      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,


        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
        },
        onEnd: evt => {
          // console.log(evt)
          const targetRow = this.list.splice(evt.oldIndex, 1)[0] //(删除的位置，删除的个数)[{},{},{}....]=>{}
          this.list.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          // console.log(tempIndex)
          this.newList.splice(evt.newIndex, 0, tempIndex)

          // console.log(this.oldList,this.newList)
        }
    
      })
    }
  }
}
</script>



<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>



<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
</style>
